<template>
  <div>
    <el-form ref="form" :model="form" >
      <el-divider></el-divider>
      <!-- <div >
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

        </el-upload>
      </div> -->
      <div class='picupload' >
        <div style="width: 150px; height: 120px;margin: 50px auto  0px;" @click="folderClick">
          <el-image
            src="/static/assets/icon/folder.png"
            fit="contain">
          </el-image>
        </div>
        <div class="picupload_text">
        <div>
          点击或将文件拖拽到这里上传
        </div>
        <div>
          支持扩展名:jpg
        </div>
        </div>
      </div>
    </el-form>
    <input id="fileup" type="file" v-show="false" @change="uploadchanged" ref="fileup">
  </div>
</template>

<script>
import OSS from 'ali-oss'
import {getOssToken} from '../../api/api';
export default {
  // props:{
  //   provinces:{
  //     type:Object,
  //     default:[{lable:'北京'},{lable:'上海'},{lable:'浙江'},{lable:'天津'},{lable:'湖北'}]
  //   }},
  data() {
    return {
        upfileurl:'',
        form: {
            selectOne:'',//单选默认值
        },
    }
  },
  computed:{

    },
  methods: {
      folderClick:function(){
        this.$refs.fileup.click()
    },
    uploadchanged:function(val){
      let file=this.$refs.fileup.files[0]
      console.log(val,file)
      getOssToken().then((ossToken)=>{
        let ossClient=new OSS({
          region:'oss-cn-hangzhou',
          accessKeyId: ossToken.result.credentials.accessKeyId,
          accessKeySecret: ossToken.result.credentials.accessKeySecret,
          stsToken: ossToken.result.credentials.securityToken,
          bucket: 'topexam'
        })
        ossClient.put('paper/sumiao/', file).then(function (result) {
            console.log(result);
          }).catch(function (err) {
            console.log(err);
          })
      }).catch((err)=>{console.log(err)})
    }
  },
}
</script>

<style >
.picupload{
align-content: center;
margin: 0 auto;
width:80%;
height:260px;
background-color:'#666';
border: 1px solid #444;
}
.picupload_text{
  text-align: center;
}
.upload-demo{
  margin: 0 auto;
}
</style>